<template>
  <div class="mobile-take-sheet-detail">
    <page-wrapper>
      <div v-loading="loading">
        <!-- 基础信息表单 -->
        <j-border class="form-border">
          <j-form layout="vertical">
            <j-form-item label="单据号" :span="24" :contentNest="false">
              <a-input v-model:value="formData.code" disabled style="font-size: 16px;" />
            </j-form-item>
            
            <j-form-item label="关联盘点任务" :span="24" :contentNest="false">
              <a-input v-model:value="formData.planCode" disabled style="font-size: 16px;" />
            </j-form-item>
            
            <!-- <j-form-item label="预先盘点单" :span="24" :contentNest="false">
              <a-input :value="formData.preSheetCode || '无'" disabled style="font-size: 16px;" />
            </j-form-item> -->
            
            <j-form-item label="仓库" :span="24" :contentNest="false">
              <a-input v-model:value="formData.scName" disabled style="font-size: 16px;" />
            </j-form-item>
            
            <j-form-item label="盘点类别" :span="24" :contentNest="false">
              <a-input v-model:value="takeTypeDesc" disabled style="font-size: 16px;" />
            </j-form-item>
            
            <j-form-item label="盘点状态" :span="24" :contentNest="false">
              <a-input v-model:value="takeStatusDesc" disabled style="font-size: 16px;" />
            </j-form-item>
            
            <j-form-item label="状态" :span="24" :contentNest="false">
              <a-input v-model:value="statusDesc" disabled style="font-size: 16px; color: #52c41a;" v-if="$enums.TAKE_STOCK_SHEET_STATUS.APPROVE_PASS.equalsCode(formData.status)" />
              <a-input v-model:value="statusDesc" disabled style="font-size: 16px; color: #f5222d;" v-else-if="$enums.TAKE_STOCK_SHEET_STATUS.APPROVE_REFUSE.equalsCode(formData.status)" />
              <a-input v-model:value="statusDesc" disabled style="font-size: 16px;" v-else />
            </j-form-item>
            
            <j-form-item label="备注" :span="24" :contentNest="false">
              <a-textarea v-model:value="formData.description" disabled />
            </j-form-item>
            
            <j-form-item label="操作人" :span="24" :contentNest="false">
              <a-input v-model:value="formData.updateBy" disabled style="font-size: 16px;" />
            </j-form-item>
            
            <j-form-item label="操作时间" :span="24" :contentNest="false">
              <a-input v-model:value="formData.updateTime" disabled style="font-size: 16px;" />
            </j-form-item>
            
            <j-form-item label="审核人" :span="24" :contentNest="false" v-if="formData.approveBy">
              <a-input v-model:value="formData.approveBy" disabled style="font-size: 16px;" />
            </j-form-item>
            
            <j-form-item label="审核时间" :span="24" :contentNest="false" v-if="formData.approveTime">
              <a-input v-model:value="formData.approveTime" disabled style="font-size: 16px;" />
            </j-form-item>
            
            <j-form-item label="拒绝理由" :span="24" :contentNest="false" v-if="formData.refuseReason">
              <a-input v-model:value="formData.refuseReason" disabled style="font-size: 16px; color: #f5222d;" />
            </j-form-item>
          </j-form>
        </j-border>

        <!-- 商品列表 -->
        <div class="goods-list-container">
          <vxe-grid
            ref="grid"
            show-overflow
            highlight-hover-row
            row-id="id"
            :data="tableData"
            :columns="tableColumn"
            height="300"
          />
        </div>

        <!-- 底部按钮 -->
        <div class="bottom-buttons">
          <a-button @click="closeDialog" class="cancel-btn">关闭</a-button>
        </div>
      </div>
    </page-wrapper>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue';
import * as api from '@/api/sc/stock/take/sheet';
import { useRoute } from 'vue-router';

const props = {
};

export default defineComponent({
  name: 'MobileTakeSheetDetail',
  props,
  setup() {
    const state = reactive({
      loading: false,
      formData: {
        id: '',
        code: '',
        planId: '',
        planCode: '',
        preSheetId: '',
        preSheetCode: '',
        scName: '',
        takeType: '',
        takeStatus: '',
        bizName: '',
        status: '',
        description: '',
        updateBy: '',
        updateTime: '',
        approveBy: '',
        approveTime: '',
        refuseReason: '',
      },
      takeTypeDesc: '',
      takeStatusDesc: '',
      statusDesc: '',
      tableData: [],
      tableColumn: [
        { field: 'productName', title: '商品名称', width: 200 },
        { field: 'stockNum', title: '库存', width: 70 },
        { field: 'takeNum', title: '盘点数', width: 80 },
        { field: 'spec', title: '规格', width: 80 },
        //{ field: 'unit', title: '单位', width: 60 },
      ],
    });

    return { ...toRefs(state) };
  },
  created() {
    this.loadFormData();
  },
  methods: {
    // 加载表单数据
    loadFormData() {
      const route = useRoute();
      console.log('路由参数', route);
      this.loading = true;
      api
        .getDetail(route.params.id)
        .then((data) => {
          this.formData = data;
          this.tableData = data.details || [];
          
          // 设置枚举值描述
          this.takeTypeDesc = this.$enums.TAKE_STOCK_PLAN_TYPE.getDesc(data.takeType);
          this.takeStatusDesc = this.$enums.TAKE_STOCK_PLAN_STATUS.getDesc(data.takeStatus);
          this.statusDesc = this.$enums.TAKE_STOCK_SHEET_STATUS.getDesc(data.status);
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 关闭页面
    closeDialog() {
      this.$router.go(-1);
    },
  },
});
</script>

<style scoped lang="less">
.mobile-take-sheet-detail {
  padding: 12px;
  font-size: 16px; // 增加基础字体大小

  // 表单相关样式
  .form-border {
    margin-bottom: 15px;
    padding: 10px;
  }

  .ant-form-item-label > label {
    font-size: 16px; // 表单标签字体大小
  }

  // 商品列表样式
  .goods-list-container {
    margin-bottom: 15px;
  }

  // 表格样式调整
  :deep(.vxe-table) {
    font-size: 16px; // 表格字体大小
  }

  // 底部按钮样式
  .bottom-buttons {
    display: flex;
    button {
      width: 100%;
      font-size: 18px; // 底部按钮字体大小
      height: 44px;
    }

    .cancel-btn {
      background: #f5f5f5;
      border-color: #d9d9d9;
    }
  }
}
</style>